<template>
    <div>
        <Modal
                class="vaccine-info-modal"
                width="1100px"
                v-model="myVisible"
                title="疫苗选择"
        >
            <div class="type-con">
                <span class="lable">接种类型</span>
                <Select v-model="value" style="width:200px" class="common-select">
                    <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </div>

            <div class="vaccine-select-con">
                <Button class="oneVaccines active">一类疫苗</Button>
                <Button class="twoVaccines">二类疫苗</Button>
            </div>

            <div class="table-con">
                <table>
                    <thead>
                      <tr>
                          <th>选择</th>
                          <th>疫苗名称（一类)</th>
                          <th>当前剂次/总剂次</th>
                          <th>选择</th>
                          <th>替代疫苗</th>
                          <th>当前剂次/总剂次</th>
                      </tr>
                    </thead>
                    <tbody>
                       <tr>
                           <td><Checkbox v-model="value"></Checkbox></td>
                           <td>麻腮风联合减毒活疫苗</td>
                           <td>2/3</td>
                           <td>
                               <div><Checkbox v-model="value"></Checkbox></div>
                               <div><Checkbox v-model="value"></Checkbox></div>
                           </td>
                           <td>
                               <div>麻腮风联合减毒活疫苗</div>
                               <div>麻腮风联合减毒活疫苗</div>
                           </td>
                           <td>
                               <div>2/3</div>
                               <div>2/3</div>
                           </td>
                       </tr>
                    </tbody>
                </table>
                <div class="table-btn">
                    <Button class="choose-vendor" @click="chooseVendor">选择厂商</Button>
                    <div class="btns">
                        <Button>录入</Button>
                        <Button>拒种</Button>
                        <Button>禁忌</Button>
                        <Button>超期</Button>
                        <Button>替代</Button>
                        <Button>已患</Button>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <Button type="primary" class="left-btn" @click="next">下一步</Button>
                <Button class="right-btn" @click="myVisible=false">取消</Button>
            </div>
        </Modal>

        <vendor :visible.sync="vendorVisible"></vendor>
    </div>
</template>

<script>
    import vendor from '../components/vendor';

    export default {
        props: {
            visible: Boolean
        },
        data () {
            return {
                myVisible: this.modalVisible,
                myVisible1: false,

                value:'',
                typeList:[
                    {
                        value: 'New York',
                        label: 'New York'
                    },
                    {
                        value: '2',
                        label: 'New York'
                    }
                ],
                vendorVisible: false,
            }
        },
        watch: {
            myVisible: function (val) {
                this.$emit('update:visible', val);
            },
            visible: function (val) {
                this.myVisible = val;
            }
        },
        methods:{
            chooseVendor(){
                this.vendorVisible=true;
            },
            next(){
                this.myVisible=false;
                this.$router.push({path: '/home/lastAppoint'});
            }
        },
        components:{
            vendor
        }
    }
</script>

<style lang="less">
    .vaccine-info-modal{
        .type-con{
            border-bottom: 1px dashed #D2D2D2;
            .lable{
                font-size:14px;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                color:rgba(53,76,107,1);
            }
        }
        .vaccine-select-con{
            text-align: center;
            margin:20px 0 30px;
            .ivu-btn{
                width:161px;
                height:44px;
                background:rgba(209,217,238,1);
                border-radius: 0;
                color:rgba(247,249,255,1);
                font-size: 14px;
                &:nth-child(2){
                    margin-left:-4px;
                }
                &:focus{
                    box-shadow:none;
                }
                &.active{
                    background:rgba(138,130,249,1)
                }
            }
        }
        .table-con{
            table{
                width:100%;
                text-align: center;
                font-size: 14px;
                border-collapse:collapse;
                thead{
                    height:38px;
                    background:rgba(93,140,254,1);
                    font-size:14px;
                    font-family:PingFang-SC-Bold;
                    font-weight:bold;
                    color:rgba(255,255,255,1);
                    tr{
                        height:38px;
                        line-height: 38px;
                    }
                }
                tbody{
                    tr{
                        background:rgba(245,250,255,1);
                        td{
                            padding:15px 0;
                        }
                    }
                }
            }
            .table-btn{
                display: flex;
                margin-top:10px;
                .choose-vendor{
                    flex: 1;
                    background:rgba(93,140,254,1);
                    border-radius:6px;
                    color:rgba(255,255,255,1);
                    margin-right:12px;
                    font-size: 14px;
                }
                .btns{
                    .ivu-btn{
                        width:80px;
                        height: 38px;
                        background: #fff;
                        border:1px solid #5D8CFE;
                        color:#5D8CFE;
                        font-size: 14px;
                    }
                }
            }
        }
        .ivu-modal-footer{
            text-align: center;
            margin-top:80px;
            .left-btn{
                height:40px;
                width:119px;
                background:rgba(93,140,254,1);
                border-radius:6px;
                font-size: 14px;
                margin-right: 80px;
            }
            .right-btn{
                height:40px;
                width:119px;
                background:rgba(209,217,238,1);
                border-radius:6px;
                font-size: 14px;
                color:#fff;
            }
        }
    }
</style>
